<template>
  <div
    v-if="type === 'textarea'"
    class="vw-textarea"
    :class="{
      'is-disabled': disabled,
      'is-clearable': getClearable,
      'vw-textarea--suffix': $slots.prefix || suffixIcon || clearable,
      'vw-textarea--prefix': $slots.prefix || prefixIcon
    }"
    @mouseenter="hovering = true"
    @mouseleave="hovering = false"
  >
    <textarea
      :style="getInnerTextAreaStyle"
      class="vw-textarea__inner"
      :value="value"
      :rows="rows"
      :disabled="disabled"
      :placeholder="placeholder"
      v-on:keyup="$emit('input', $event.target.value)"
      @input="$emit('input', $event.target.value)"
      @focus="focus = true"
      @blur="focus = false"
    />
  </div>
  <div
    v-else
    class="vw-input"
    :class="{
      'is-disabled': disabled,
      'is-clearable': getClearable,
      'vw-input--suffix': $slots.prefix || suffixIcon || clearable,
      'vw-input--prefix': $slots.prefix || prefixIcon
    }"
    @mouseenter="hovering = true"
    @mouseleave="hovering = false"
  >
    <span v-if="prefixIcon" class="vw-input__prefix" v-on:click="handleClean">
      <i class="vw-input__icon" :class="prefixIcon"></i>
    </span>
    <span v-if="!prefixIcon && $slots.prefix" class="c-input__prefix">
      <slot name="prefix"></slot>
    </span>

    <input
      type="text"
      class="vw-input__inner"
      :value="value"
      :placeholder="placeholder"
      v-on:keyup="$emit('input', $event.target.value)"
      @change="$emit('change', $event.target.value)"
      @input="$emit('input', $event.target.value)"
      @focus="focus = true"
      @blur="focus = false"
    />
    <span v-if="!getClearable && suffixIcon" class="vw-input__suffix">
      <i class="vw-input__icon" :class="suffixIcon"></i>
    </span>
    <span
      v-if="!getClearable && !suffixIcon && $slots.suffix"
      class="vw-input__suffix"
    >
      <slot name="suffix"></slot>
    </span>
    <span
      v-show="getClearable"
      class="vw-input__suffix"
      v-on:click="handleClean"
    >
      <i v-on:click="handleClean" class="vw-input__icon vw-icon-error"></i>
    </span>
  </div>
</template>

<script>
  export default {
    name: 'VwInput',
    props: {
      placeholder: String,
      value: {},
      disabled: Boolean,
      clearable: Boolean,
      prefixIcon: String,
      suffixIcon: String,
      type: {
        type: String,
        default: 'text',
        validate(val) {
          return ['text', 'textarea'].indexOf(val) !== -1
        }
      },
      rows: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        focus: false,
        hovering: false
      }
    },
    computed: {
      getInnerTextAreaStyle() {
        return {
          minHeight: '33px'
        }
      },
      getClearable() {
        console.log(this.value)
        if (
          this.clearable &&
          (this.focus || this.hovering) &&
          this.value != undefined &&
          this.value != null &&
          ('' + this.value).length > 0
        ) {
          return true
        } else {
          return false
        }
      }
    },
    methods: {
      handleClean() {
        console.log('handleClean')
        this.$emit('input', '')
        this.$emit('change', '')
      }
    }
  }
</script>

<style lang="scss">
  @import './../../theme/src/input.scss';
</style>
